<template>
	<div>
		<view class="content">
			<view class="list_box">
				<view class="list_item">
					<view class="list_right">
						<view class="list_right_l">头像</view>
						<view class="list_right_r">
							<image @click='uploadflie' class="list_avatar"
								:src="userinfo == null?'../../static/img/avatar.png':picture.getImgUrl(userinfo.avatar)"
								mode=""></image>
							<image class="list_r" src="../../static/img/left.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="list_item" @click="inusergoto">
					<view class="list_right">
						<view class="list_right_l">昵称</view>
						<view class="list_right_r">
							<view class="list_tip">{{userinfo.nickname}}</view>
							<image class="list_r" src="../../static/img/left.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="list_item" @tap="chooseMenu">
					<view class="list_right">
						<view class="list_right_l">性别</view>
						<view class="list_right_r">
							<view class="list_tip1">{{userinfo.gender ===1?"男":"女"}}</view>
							<image class="list_r" src="../../static/img/left.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="list_box">
				<view class="list_item" @tap="choosephone">
					<view class="list_right">
						<view class="list_right_l">手机号</view>
						<view class="list_right_r">
							<view class="list_tip1">{{userinfo.mobile}}</view>
							<image class="list_r" src="../../static/img/left.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="list_item" @tap="chooseemal">
					<view class="list_right">
						<view class="list_right_l">邮箱地址</view>
						<view class="list_right_r">
							<view class="list_tip1">{{userinfo.email}}</view>
							<image class="list_r" src="../../static/img/left.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<uni-action :tips="showActionSheet.tips" :itemList="showActionSheet.itemList" :show="showActionSheet.show"
				:maskClosable="showActionSheet.maskClosable" :isCancel="showActionSheet.isCancel"
				@chooseCancel="chooseCancel"></uni-action>
		</view>
	</div>
</template>

<script>
	import {
		releupload,
		headlook,
		uploadsex,
		baseUrl
	} from '../../api/personal.js'
	export default {
		data() {
			return {
				token: '',
				showActionSheet: {
					show: false,
					maskClosable: true,
					itemList: [{
							text: "男",
							color: "#333"
						},
						{
							text: "女",
							color: "#333"
						},
					],
					color: "#9a9a9a",
					isCancel: true
				},
				sex: 1,
				userinfo: []
			}
		},
		onShow() {
			this.headrequest()
		},
		methods: {
			//上传图片
			async uploadflie() {
				let that = this
				let upadte = this.$api.uploadImg
				let url = await upadte()
				releupload(url).then((res) => {
					console.log(res)
					if (res.code == 1) {
						that.headrequest()
					}
				})
			},
			// uploadImg(){
			// 	console.log(this.$api)
			// 	let that = this
			// 	uni.chooseImage({
			// 		count:1,//上传一张图片
			// 		success(res) {
			// 			that.imgArr = res.tempFilePaths;
			// 			uni.uploadFile({
			// 				url:'/common/upload',
			// 				filePath:that.imgArr[0],
			// 				name:'file',
			// 				formData: {
			// 					'token': that.token  //formData是指除了图片以外，额外加的字段
			// 					},
			// 				success:(res)=>{
			// 					var listbox= JSON.parse(res.data);
			// 						releupload(that.token,listbox.data.url).then((res)=>{
			// 							console.log(res)
			// 							if(res.code ==1){
			// 								console.log("dd")
			// 								that.headrequest()
			// 							}
			// 						})
			// 					}
			// 				})
			// 			}
			// 	});
			// },
			inusergoto() {
				uni.navigateTo({
					url: '../personal/nickname'
				})
			},
			choosephone() {
				uni.navigateTo({
					url: '../personal/editPhone'
				})
			},
			chooseemal() {
				uni.navigateTo({
					url: '../personal/editMail'
				})
			},
			//昵称修改
			// 点击弹窗
			chooseMenu() {
				this.showActionSheet.show = true;
			},

			// 弹窗关闭
			chooseCancel(id) {
				this.sex = id
				this.showActionSheet.show = false;
				if (id != undefined) {
					uploadsex(id, this.token).then((res) => {
						if (res.code == 1) {
							this.headrequest()
						}
					})
				}
			},
			//加载个人信息
			headrequest() {
				this.token = uni.getStorageSync('token')
				headlook().then((res) => {
					this.userinfo = res.data
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		color: #333;
		font-size: 30rpx;

		.list_box {
			width: 100%;
			height: auto;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: column;
			margin-top: 18rpx;
			padding: 0 30rpx;
			background-color: #fff;

			.list_item {
				width: 100%;
				height: 120rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.list_right {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx solid #f5f5f5;

					.list_right_l {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333;
					}

					.list_right_r {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.list_avatar {
							width: 76rpx;
							height: 76rpx;
							border-radius: 6rpx;
							margin-right: 20rpx;
						}

						.list_tip {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999;
							margin-right: 20rpx;
						}

						.list_tip1 {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333;
							margin-right: 20rpx;
						}

						.list_r {
							width: 12rpx;
							height: 22rpx;
						}
					}
				}
			}

		}
	}
</style>
